<template>
  <el-row>
    <el-col :span="8">
      <el-card class="box-card">
        <ul>
          <li v-for="item in todosList" :key="item.id" class="text item">
            <el-checkbox v-model="item.done" :label="item.content" />
            <el-tag v-if="!item.done" type="warning" effect="dark" round>未完成</el-tag>
            <el-tag v-else type="success" effect="dark" round>已完成</el-tag>
            <el-divider />
          </li>
        </ul>
        <el-tag type="info" size="large" effect="dark">已完成：{{ doneNum }}，共：{{ totalNum }}</el-tag>
        <el-button type="danger" @click="clearDone">清除已完成</el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {defaultStore} from "@/store/store";
import {onMounted, toRefs, watch} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

// -----------响应式数据部分开始----------
const store = defaultStore()

const { todosList, doneNum, totalNum, todos } = toRefs(store)
// -----------响应式数据部分结束----------

// -----------方法部分开始----------
const clearDone = () => {
  ElMessageBox.confirm(
      '确定清除已完成的任务?',
      '提示信息',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',}
  ).then(() => {
        store.clearDonTodo()
        ElMessage({type: 'success', message: '清除成功！',})
      }).catch(() => {
        ElMessage({type: 'info', message: '取消清除！',})
      })
}

// 数据改变就将数据保存到localStorage中
watch(todos, () => {
  store.onSaveTodos()
},{deep: true})
// -----------方法部分结束----------

// 初始化的时候读取localStorage中保存的数据
onMounted(() => {
  store.onReadTodos()
})
</script>

<style scoped>
.el-row {
  margin-top: 10px;
}
ul li {
  list-style: none;
}
.el-tag {
  margin: auto 20px;
}

li .el-checkbox__label {
  display: inline-block;
  white-space: pre-line;
  word-wrap: break-word;
  line-height: 20px;
}

.el-button {
  float: right;
}
</style>
